import React, { useEffect, useState } from 'react'
import { Tag, Select } from 'antd'
import Input from './SkillInput'
import { getHerosList } from '@/api/hero'
import { connect } from 'umi'

const { Option } = Select;

type Props = {
    index: number,
    type: string,
    dispatch: any
}

function RelationCard({ index, type, dispatch }: Props) {
    const [data, setData] = useState([])

    function handleChange(val: any) {
        dispatch({ type: "hero/setProps", skills: type, index, action: "hero", val })
    }

    useEffect(() => {
        getHerosList({}).then((res: any) => {
            setData(res)
        })
    }, [])
    return (
        <div className='banner_box'>
            <div className='banner_card'>
                <Tag className='p3' color="blue">英雄{index + 1}</Tag>
                <div className='banner_flex'>
                    <span  className='left_text'>
                        英雄名称
                    </span>
                    <Select style={{ width: 120 }} onChange={handleChange}>
                        {
                            data.map((item: any) => {
                                return <Option value={ item._id} key={item._id}>
                                    { item.name }
                                </Option>
                            })
                        }
                    </Select>
                </div>

                <Input prop={type} iptType="textArea" index={index} title="描述" type="desc" />
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(RelationCard)